<template>
  <div class="grid">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</template>
<script lang="ts" setup>
</script>
<style lang="less" scoped>
.grid {
  width: 100%;
  // height: 100%;
  height: calc(100vh - 90px);
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
  grid-template-rows: 1fr 1fr 1fr;
  overflow: auto;
}
.child {
  width: 100%;
  height: 400px;
  background: rgb(169, 192, 66);
  border-radius: 10px;
}
</style>